<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {

        function pqDatePicker(ui) {
            var $this = $(this);
            $this
                //.css({ zIndex: 3, position: "relative" })
                .datepicker({
                    yearRange: "-25:+0", //25 years prior to present.
                    changeYear: true,
                    changeMonth: true,
                    showButtonPanel: true,
                    onClose: function (evt, ui) {
                        $(this).focus();
                    }
                });
            //default From date
            $this.filter(".pq-from").datepicker("option", "defaultDate", new Date("01/01/1996"));
            //default To date
            $this.filter(".pq-to").datepicker("option", "defaultDate", new Date("12/31/1998"));
        }

        //define colModel
        var colM = [
        { title: "ShipCountry", width: 100, dataIndx: "ShipCountry",
            filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
        },
        { title: "Customer Name", width: 120, dataIndx: "ContactName",
            filter: { type: 'textbox', condition: 'begin', listeners: ['change'] }
        },
        { title: "Order ID", minWidth: 130, dataIndx: "OrderID", dataType: "integer",
            filter: { type: 'textbox', condition: "between", listeners: ['change'] }
        },
		{ title: "Order Date", minWidth: "190", dataIndx: "OrderDate", dataType: "date",
		    filter: { type: 'textbox', condition: "between", init: pqDatePicker, listeners: ['change'] }
		},
        { title: "Shipping Region", width: 130, dataIndx: "ShipRegion",
            filter: { type: 'select',
                condition: 'equal', 
                //init: multiSelect,
                valueIndx: "ShipRegion",
                labelIndx: "ShipRegion",
                groupIndx: "ShipCountry",
                prepend: { '': '--Select--' },
                listeners: ['change']
            }
        },
        { title: "Paid", width: 100, dataIndx: "paid", dataType: "bool", align: "center",
            filter: { type: "checkbox", subtype: 'triple', condition: "equal", listeners: ['click'] }
        },
		{ title: "Shipping Via", width: 140, dataIndx: "ShipVia",
		    filter: { type: "select",
		        condition: 'equal',
		        prepend: { '': '--Select--' },
		        valueIndx: "ShipVia",
		        labelIndx: "ShipVia",
		        listeners: ['change']
		    }
		},
		{ title: "Required Date", width: 100, dataIndx: "RequiredDate", dataType: "date" },
		{ title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date" },
        { title: "Freight", width: 100, align: "right", dataIndx: "Freight", dataType: "float" },
        { title: "Shipping Name", width: 150, dataIndx: "ShipName" },
        { title: "Shipping Address", width: 270, dataIndx: "ShipAddress" },
        { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
        { title: "Shipping Postal Code", width: 180, dataIndx: "ShipPostalCode" }

		];
        //define dataModel
        var dataModel = {
            location: "remote",
            sorting: "local",
            dataType: "JSON",
            method: "GET",
            sortIndx: "OrderID",
            sortDir: "up",
            url: "/pro/orders/get",
            //url: "/pro/orders.php",//for PHP
            getData: function (dataJSON) {
                return { data: dataJSON.data };
            }
        }
        var obj = { width: 800, height: 500,
            dataModel: dataModel,
            colModel: colM,
            pageModel: { type: 'local', rPP: 20 },
            editable: false,
            selectionModel: { type: 'cell' },
            filterModel: { on: true, mode: "AND", header: true },
            title: "Shipping Orders",
            resizable: true,
            hwrap:false,
            freezeCols: 2
        };
        var $grid = $("#grid_filter").pqGrid(obj);
        
        //load shipregion and shipvia dropdowns in first load event.                
        $grid.one("pqgridload", function (evt, ui) {
            var column = $grid.pqGrid("getColumn", { dataIndx: "ShipRegion" });
            var filter = column.filter;
            filter.cache = null;
            filter.options = $grid.pqGrid("getData", { dataIndx: ["ShipCountry", "ShipRegion"] });

            var column = $grid.pqGrid("getColumn", { dataIndx: "ShipVia" });
            var filter = column.filter;
            filter.cache = null;
            filter.options = $grid.pqGrid("getData", { dataIndx: ["ShipVia"] });

            $grid.pqGrid("refreshHeader");
        });
    });
        
</script>    
</head>
<body>

<div id="grid_filter" style="margin:5px auto;"></div>

</body>

</html>
